<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>折叠弹窗</title>

		<style>
			body,
			div,
			h1,
			h5,
			ol,
			dl,
			dd,
			dt,
			li,
			ul {
				padding: 0px;
				list-style: none;
				margin: 0px;
			}

			h5 {
				font-size: 14px;
				color: whitesmoke;
			}

			#table {
				width: 200px;
				border-radius: 5px;
				border: 2px solid lightblue;
				margin: 10px;
				font-size: 10px;
			}

			#title {
				text-align: center;
				padding: 5px;
				border-radius: 5px 5px 0px 0px;
				background-color: blue;
			}

			#listTitle {
				background-color: #f3f3f3;
				margin-top: 2px;
				margin: 1px 1px;
				padding: 2px 5px;
				border-radius: 5px;
				overflow: hidden;
			}

			#list1,
			#list2,
			#list3 {
			overflow: scroll;
				height: 0px;
	
				
				transition: all 1s ease;
			}

			#list1 li,
			#list2 li,
			#list3 li {

				font-weight: 300;

			}
		</style>
	</head>

	<body>
		<div id="table">
			<div id="title">
				<h5>多级菜单</h5>
			</div>
			<div id="listTitle">首页</div>
			<ol id="list1">
				<li>数据概览</li>
				<li>日历视图</li>
				<li>待办事项</li>
			</ol>
			<div id="listTitle">用户管理</div>
			<ol id="list2">
				<li>添加用户</li>
				<li>用户列表</li>
				<li>权限管理</li>
			</ol>
			<div id="listTitle">系统设置</div>
			<ol id="list3">
				<li>基础设置</li>
				<li>通知设置</li>
				<li>语言设置</li>
				<li>日志管理</li>
			</ol>
		</div>
	</body>
	<script>
		const table = document.getElementById("table")
		const ol = document.querySelectorAll("ol");
		ol.forEach(function(obj) {
			obj.flag = false;
		})

		function listSwitch(event) {
			console.log(event.target)
			if (event.target.id == "listTitle") {
				var list = event.target.nextElementSibling;
				console.log(list.flag)
				if (list.flag == false) {
					list.style.height = "50px";
					list.style.padding = "0px 0px 0px 20px"
					
					list.flag = true;
				} else {
					list.style.padding = "0px"
					
					list.style.height = "0px";
					list.flag = false;
				}
			}

		}
		table.addEventListener("click", listSwitch, false);

		//绑定在table上
		// 4、折叠菜单的实现?
		// 题目：实现一个多级折叠菜单，菜单包含多个一级菜单选项，
		// 每个一级菜单选项下有若干子菜单。通过 DOM 操作，点击一级菜单选项时，展开或收起对应的子菜单。?

		// 提示：使用classList添加或移除控制样式的类名来实现显示与隐藏，
		// 通过addEventListener为菜单选项添加点击事件。?
	</script>
</html>